<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆界面</title>

    <meta charset="utf-8">

    <style>
        input {
            width: 200px;
            height: 25px;
            outline: none; /* 移除默认边框 */
            border: 1px solid #ccc; /* 添加自定义边框 */
            background-color: #f2f2f2; /* 自定义背景色 */
            color: #333; /* 自定义文字颜色 */
            border-radius: 4px; /* 添加圆角边框 */
        }

        form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    </style>

<%-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">--%>


<%-- </script>--%>
    <script>
        function refreshCaptcha() {
            // document.querySelector('#captchaImg').setAttribute('src',Date.now().toString())
            <%--document.querySelector('#captchaImg').setAttribute('src', `/CaptchaServlet?t=${Date.now().toString()}`)--%>
            document.querySelector('#captchaImg').setAttribute('src', `/CaptchaServlet?t=${Date.now()}`)// 添加时间戳以防止缓存
        }
        function success(){
        alert("注册成功，请登录")
        }
        function nameError(){
            alert("用户名错误，请重新输入")
        }
        function isLock(){
            alert("账户已被锁定，请稍后再试")
        }
        function pwdError(){
            alert("密码错误，请重新输入")
        }
        function lock(){
            alert("因错误次数太多账户已被锁定，请稍后再试")
        }
        function captcha(){
            alert("验证码错误，请重新输入")
        }
        function forget1(){
            alert("忘记密码成功，请登录")
        }
        function forget0(){
            alert("忘记密码失败，请重试")
        }

    </script>



</head>
<body>


<c:choose>
    <c:when test="${Login == 0}">
        <script>
            success()
        </script>
    </c:when>

    <c:when test="${Login == 1}">
        <script>
            nameError()
        </script>
    </c:when>

    <c:when test="${Login == 2}">
        <script>
            isLock()
        </script>
    </c:when>

    <c:when test="${Login == 3}">
        <script>
            pwdError()
        </script>
    </c:when>
    <c:when test="${Login == 4}">
        <script>
            captcha()
        </script>
    </c:when>
    <c:when test="${forget == 1}">
        <script>
            forget1()
        </script>
    </c:when>
    <c:when test="${forget == 0}">
        <script>
            forget0()
        </script>
    </c:when>

</c:choose>

<c:if test="${lock == 4}">
    <script>
        lock()
    </script>
</c:if>


<form action="<c:url value="/LoginServlet"/>" method="post">
    <div class="div">
        用户名 :  <input type="text" placeholder="请输入账号" name="name">
        <br>
        密 码 :  <input type="text" placeholder="请输入密码" name="pwd">
        <br>
        验证码 ： <input type="text" name="captchaInput" placeholder="请根据图片输入正确的验证码" required /> <!-- 用户输入验证码 -->
         <img id="captchaImg" src="<c:url value="/CaptchaServlet"/>" alt="Captcha" onclick="refreshCaptcha();" /> <!-- 点击图像刷新验证码 -->
        <button type="submit">登陆</button>
    </div>
    <a href="<c:url value="/forget.jsp"/>">忘记密码</a>

</form>



</body>
</html>
